<template>
  <div class="m-page-main" style="height: auto">
    <div class="table-card">
      <Table :data="list" border stripe style="width: 100%">
        <table-column prop="createtime" label="头像" align="center">
        </table-column>
        <table-column prop="nickname" label="姓名" align="center">
        </table-column>
        <table-column prop="mobile" align="center" label="电话"> </table-column>
        <table-column prop="address" align="center" label="角色">
        </table-column>
        <table-column prop="address" align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="setRole(scope.row)">设置角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </table-column>
      </Table>
    </div>

    <Pagination
      class="mu-page"
      :hide-on-single-page="true"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="currentChange"
    >
    </Pagination>
    <Dialog
      :visible.sync="roleVisible"
      width="920px"
      custom-class="role-dialog"
      center
      :show-close="false"
    >
    <el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline">
      <el-form-item label="角色选择" prop="roletypelist">
        <el-select v-model="form.roletypelist" placeholder="选择角色">
          <el-option label="队长" value="1"></el-option>
          <el-option label="普通队员" value="2"></el-option>
          <el-option label="安全员" value="3"></el-option>
          <el-option label="驾驶员" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="role-btn" @click="saveRole">保存</el-button>
        <el-button type="primary" class="role-btn" @click="roleVisible=false">取消</el-button>
      </el-form-item>
    </el-form>
    </Dialog>
    <Dialog
      :visible.sync="centerDialogVisible"
      width="1032px"
      custom-class="user-info-dialog"
      center
    >
      <el-row>
          <el-col :span="12">
            <div class="form-info">
              <span>姓  名:</span> {{ info.nickname }}
            </div>
            <div class="form-info">
              <span>性  别:</span> {{ info.gender | gender }}
            </div>
            <div class="form-info">
              <span>证件类型:</span> {{ info.paperstype | paper }}
            </div>
            <div class="form-info">
              <span>证件号码:</span> {{ info.papers }}
            </div>
            <div class="form-info">
              <span>手机号码:</span> {{ info.mobile }}
            </div>
            <div class="form-info">
              <span>学校/单位:</span> {{ info.schoolname }}
            </div>
            <div class="form-info">
              <span>职  务:</span> {{info.jobname}}
            </div>
          </el-col>
          <el-col :span="12">
              <div class="person-images-2-box">
                <div class="person-images-2">
                  <img :src="info.photographimage ">
                </div>
                免冠彩色2寸照
              </div>
              <div class="form-info">
                  <span>E-mail:</span> {{ info.email }}
                </div>
                <div class="form-info">
                  <span>通讯地址:</span> {{ info.address }}
                </div>
                <div class="form-info">
                  <span>邮政编码:</span> {{ info.postcode }}
                </div>
          </el-col>
          <el-col :span="24">
              <div>
                <span style="vertical-align: top;">其他证件:</span> <img  :src="info.otherpapersimage" class="other-zhengjian"/>
              </div>
          </el-col>
        </el-row>
    </Dialog>
  </div>
</template>
<script>
import { Pagination, Table, TableColumn, Dialog } from "element-ui";
import { cmsmotorcadepeolist, setroletype } from "@/api";

export default {
  components: {
    Pagination,
    Table,
    TableColumn,
    Dialog,
  },
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      list: [],
      info: {},
      form: {
        roletypelist: null
      },
      rules: {
        roletypelist: [
          {
            required: true,
            message: "请选择角色",
            trigger: "blur",
          },
        ],
      },
      roleVisible: false,
      centerDialogVisible: false,
    };
  },
  created() {
    this.getUser(1)
  },
  methods: {
    currentChange (page) {
      this.getUser(page)
    },
    getUser (page) {
        const id = this.$route.params.id
        cmsmotorcadepeolist({ cmsmotorcadeid: id, page }).then((res) => {
          if (res.data.code === 1) {
            this.list = res.data.data;
          } else {
            this.$message(res.data.msg);
          }
        });
    },
    handleClick(obj) {
      this.info = obj
      this.centerDialogVisible = true;
    },
    setRole (obj) {
      this.form.userid = obj.id
      this.form.cmsmotorcadeid = this.$route.params.id
      this.roletypelist = null
      this.roleVisible = true
    },
    saveRole () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          setroletype(this.form).then(res => {
            if (res.data.code === 1) {
              this.$message({message: res.data.msg, type: 'success'});
              this.roleVisible = false
            } else {
              this.$message(res.data.msg);
            }
          })
          
        }
    })
    }
  },
};
</script>
<style scoped>
.m-page-main {
  width: 995px;
  float: right;
  margin-right: 2px;
}
.table-card {
  color: #7d7d7d;
  font-size: 18px;
  background-color: rgb(255, 255, 255);
  box-shadow: 2.5px 4.33px 10px 0px rgb(0, 0, 0, 0.2);
  padding: 25px 30px 25px;
  border-radius: 10px;
}
.table-card >>> .el-table__row {
  background-color: #f3f4f8;
}
.table-card >>> .el-table__row--striped {
  background-color: #fff;
}

.form-info {
  height: 70px;
  line-height: 70px;
  font-size: 16px;
  color: #555;
}
.form-info span {
  color: #7d7d7d
}
.person-images-2-box{
  margin-top: 30px;
  color: rgb( 125, 125, 125 );
  font-size: 16px;
  text-align: center;
  width: 150px;
  margin-bottom: 12px;
}
.person-images-2 {
  width: 150px;
  height: 200px;
  border: 1px solid rgb( 220, 220, 220 );
  margin-bottom: 15px;
}

.person-images-2 img{
  background-color: rgb( 126, 206, 244 );
  width: 135px;
  height: 182px;
  display: inline-block;
  content: "";
  margin: 9px 7px;
}
.other-zhengjian {
  width: 315px;
  height: 192px;
  margin-left: 35px;
}
</style>
<style>
.user-info-dialog .el-dialog__headerbtn .el-dialog__close {
  color: #cdcfd3;
}
.user-info-dialog .el-dialog__headerbtn{
  right: -45px;
  top: -40px;
  font-size: 40px;
}
  .user-info-dialog {
    width: 1032px;
  }
  .user-info-dialog .el-dialog__header {
    padding: 0;
  }
 .user-info-dialog.el-dialog--center .el-dialog__body {
   padding: 46px 78px;
 }
 .role-dialog {
   border-radius: 10px;
   color: #7d7d7d;
 }
 .role-dialog .el-form-item__label {
   color: #7d7d7d;
 }
 .role-dialog .el-select {
   width: 385px;
   margin-right: 36px;
 }
 .role-dialog.el-dialog--center .el-dialog__body{
   padding: 0 80px 8px;
 }
 .role-dialog .role-btn {
   background-color: #0143a0;
   margin-right: 10px;
 }
</style>